@extends('layout.app')
@section('content')

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">每日数据统计</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    数据统计
                </div>
                <!-- /.table-responsive -->
                <div class="well">
                    <div class="row" >
                        {{--<div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>浏览次数：{{$today_data['view_num']}}</p>
                        </div>--}}
                        {{--<div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>访问用户数：{{$today_data['access_num']}}</p>
                        </div>--}}
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>注册用户数：{{$today_data['register_num']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>发布任务数：{{$today_data['task_num']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>转发次数：{{$today_data['share_num']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>进行中的任务数：{{$today_data['processing_task']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>充值金额：{{$today_data['recharge_sum']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>充值人数：{{$today_data['recharge_num']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>先充金额：{{$today_data['recharge_before_sum']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>先充人数：{{$today_data['recharge_before_num']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>>酬谢率：{{$today_data['reward_rate']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>处理时长：{{$today_data['handle_time']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>自荐数：{{$today_data['reco_times']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>自荐查看数：{{$today_data['reco_view_times']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>自荐成功数：{{$today_data['reco_suc_times']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>自荐查看率：{{$today_data['reco_view_rate']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>人均酬谢：{{$today_data['reward_average']}}</p>
                        </div>
                        <div class="col-xs-6 col-sm-2 col-md-3" style="">
                            <p>总酬谢：{{$today_data['reward_sum']}}</p>
                        </div>
                    </div>
                </div>
                <div class="well">
                    <div class="row" >
                        <div class="col-xs-6 col-sm-4 col-md-4" style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;"><label style="line-height:20px;width:150px;">开始时间：</label><input style="background: #fff;" id="zstart" class="form-control" name="zstart" readonly/></div>
                        <div class="col-xs-6 col-sm-4 col-md-4" style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;"><label style="line-height:20px;width:150px;">结束时间：</label><input style="background: #fff;"  id="zend" class="form-control" name="zend" readonly/>&nbsp;<button id="search" class="btn btn-primary">搜索</button></div>
                    </div>
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>日期</th>
                                {{--<th>用户访问量</th>
                                <th>独立访问</th>--}}
                                <th>注册用户数</th>
                                <th>发布任务数</th>
                                <th>转发数</th>
                                <th>进行中的任务数</th>
                                <th>充值金额</th>
                                <th>充值用户</th>
                                <th>先充金额</th>
                                <th>先充用户</th>
                                <th>酬谢率</th>
                                <th>处理时长</th>
                                <th>自荐数</th>
                                <th>自荐查看数</th>
                                <th>自荐成功数</th>
                                <th>自荐查看率</th>
                                <th>人均酬谢</th>
                                <th>总酬谢</th>

                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div id="pagination" style="float:right;" class="m-style">

                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
    @section('jsscript')
        @parent
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

        <!-- Metis Menu Plugin JavaScript -->
        <script src="/vendor/metisMenu/metisMenu.min.js"></script>
        <!-- DataTables JavaScript -->
        <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
        <script src="/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
        <script src="/vendor/datatables-responsive/dataTables.responsive.js"></script>
        <script src="/dist/js/sb-admin-2.js"></script>
        <script src="/vendor/pagination/jquery.pagination.js"></script>
        <script src="/vendor/datepick/bootstrap-datepicker.min.js"></script>
        <script src="/vendor/datepick/bootstrap-datepicker.zh-CN.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/vendor/pagination/common/reset.css" media="screen">
        <link rel="stylesheet" type="text/css" href="/vendor/pagination/common/highlight.min.css" media="screen">
        <link rel="stylesheet" type="text/css" href="/vendor/pagination/common/common.css" media="screen">
        <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" media="screen">
        <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="/vendor/datepick/bootstrap-datepicker.min.css" rel="stylesheet">

        <script>
            $(function() {
                var table=null;
                $.fn.datepicker.dates['cn'] = {   //切换为中文显示
                    days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
                    daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
                    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    today: "今天",
                    clear: "清除"
                };

                $('#zstart').datepicker({
                   // format: 'yyyy-mm-dd',
                    autoclose: true, //自动关闭
                    beforeShowDay: $.noop,    //在显示日期之前调用的函数
                    calendarWeeks: false,     //是否显示今年是第几周
                    clearBtn: false,          //显示清除按钮
                    daysOfWeekDisabled: [],   //星期几不可选
                    endDate: Infinity,        //日历结束日期
                    forceParse: true,         //是否强制转换不符合格式的字符串
                    format: 'yyyy-mm-dd',     //日期格式
                    keyboardNavigation: true, //是否显示箭头导航
                    language: 'cn',           //语言
                    minViewMode: 0,
                    orientation: "auto",      //方向
                    rtl: false,
                    startDate: -Infinity,     //日历开始日期
                    startView: 0,             //开始显示
                    todayBtn: false,          //今天按钮
                    todayHighlight: false,    //今天高亮
                    weekStart: 0              //星期几是开始
                });
                $('#zend').datepicker({
                   // format: 'yyyy-mm-dd',
                    autoclose: true, //自动关闭
                    beforeShowDay: $.noop,    //在显示日期之前调用的函数
                    calendarWeeks: false,     //是否显示今年是第几周
                    clearBtn: false,          //显示清除按钮
                    daysOfWeekDisabled: [],   //星期几不可选
                    endDate: Infinity,        //日历结束日期
                    forceParse: true,         //是否强制转换不符合格式的字符串
                    format: 'yyyy-mm-dd',     //日期格式
                    keyboardNavigation: true, //是否显示箭头导航
                    language: 'cn',           //语言
                    minViewMode: 0,
                    orientation: "auto",      //方向
                    rtl: false,
                    startDate: -Infinity,     //日历开始日期
                    startView: 0,             //开始显示
                    todayBtn: false,          //今天按钮
                    todayHighlight: false,    //今天高亮
                    weekStart: 0              //星期几是开始
                });

                function updateTable(page=1){
                    $.ajax({
                        url:'/admin/home/statistical_response',
                        type:'POST',
                        data:{
                            'page':page,
                            'pagesize':20,
                            'zstart':$('#zstart').val(),
                            'zend':$('#zstart').val()
                        },
                        success:function(res){
                            console.log(res)
                            if(res.data.length<=0){
                                res.data = [];
                            }
                            if(table != null) table.destroy();
                            table = $('#dataTables-example').DataTable({
                                data:res.data,
                                responsive: true,
                                paging:false,
                                searching:false,
                                retrieve: true,
                                columns: [
                                    { data: 'id' },
                                    { data: 'date'},
                                    /*{ data: 'view_num' },
                                    { data: 'access_num' },*/
                                    { data: 'register_num' },
                                    { data: 'task_num' },
                                    { data: 'share_num' },
                                    { data: 'processing_task' },
                                    { data: 'recharge_sum' },
                                    { data: 'recharge_num' },
                                    { data: 'recharge_before_sum' },
                                    { data: 'recharge_before_num' },
                                    { data: 'reward_rate' },
                                    { data: 'handle_time' },
                                    { data: 'reco_times' },
                                    { data: 'reco_view_times' },
                                    { data: 'reco_suc_times' },
                                    { data: 'reco_view_rate' },
                                    { data: 'reward_average' },
                                    { data: 'reward_sum' },

                                ]
                            });

                            $("#pagination").pagination( {
                                pageCount: res.pagecount,
                                jump: true,
                                coping: true,
                                homePage: '首页',
                                endPage: '末页',
                                prevContent: '上页',
                                nextContent: '下页',
                                callback: function (api) {
                                    var current_page = api.getCurrent()
                                    updateTable(current_page)
                                }
                            });
                        }
                    })
                }

                updateTable();
                $('#search').on('click',function(){
                    updateTable();
                })
            });
        </script>
    @endsection
@endsection

